<template>
  <div id="app">
    <!--<loading v-if="$store.state.loading"></loading>-->
    <!--<router-view></router-view>-->
    <m-tabbar id="m_tabbar" v-model="select">
      <m-tabbar-item id='Index' isRouter>
        <img src="../assets/images/ic_tab_home_normal.png" alt="" slot="icon-normal">
        <img src="../assets/images/ic_tab_home_active.png" alt="" slot="icon-active">
        首页
      </m-tabbar-item>
      <m-tabbar-item id='AudioBook' isRouter>
        <img src="../assets/images/ic_tab_subject_normal.png" alt="" slot="icon-normal">
        <img src="../assets/images/ic_tab_subject_active.png" alt="" slot="icon-active">
        话题
      </m-tabbar-item>
      <m-tabbar-item id='Manger' isRouter>
        <img src="../assets/images/ic_chat_action_emoji_normal.png" alt="" slot="icon-normal">
        <img src="../assets/images/ic_chat_action_emoji_active.png" alt="" slot="icon-active">
        发现
      </m-tabbar-item>
      <m-tabbar-item id='Broadcast' isRouter>
        <img src="../assets/images/ic_tab_status_normal.png" alt="" slot="icon-normal">
        <img src="../assets/images/ic_tab_status_active.png" alt="" slot="icon-active">
        社区
      </m-tabbar-item>
      <m-tabbar-item id='Mine' isRouter>
        <img src="../assets/images/ic_tab_profile_normal.png" alt="" slot="icon-normal">
        <img src="../assets/images/ic_tab_profile_active.png" alt="" slot="icon-active">
        我的
      </m-tabbar-item>
    </m-tabbar>
  </div>
</template>

<script>
  import mTabbar from './tabbar'
  import mTabbarItem from './tabbar-item'
  export default {
    name: 'app',
    components:{
      mTabbar,
      mTabbarItem
    },
    data() {
      return {
        select:"Index"
      }
    }
  }
</script>

<style lang="scss" scoped>
  #m_tabbar {
    .m-tabbar-item {
      position: relative;
      width: 20%;
      z-index: 1111;
      a {
        color: #949494;
        text-decoration: none;
      }
    }
    .m-tabbar-item.is-active .m-tabbar-item-text {
      color: #20a0ff;
    }
    .m-tabbar-item.is-active .m-tabbar-item-text span a {
      color: #20a0ff;
    }
  }
</style>
